<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	*{padding:0;margin:0;font-family: 'Microsoft'}
	html{font-size: 50px;}
	ul,li{list-style: none;}
	a{text-decoration: none;color: #fff;}
	
	header{
		height:1.2rem;
		background: #07cbc9;

	}
	
	.logo{
		display: block;
		float:left;
		width:5.2rem;
		height:0.96rem;
		margin: 0.12rem 1.2rem;
	}

	.logo img{
		display: block;
	}
	nav{
		float: right;
	}
	nav ul{
		display: flex;
		width:8rem;
		height:1.2rem;
		justify-content: space-between;
		margin-right: 4rem;
	}

	nav ul li{
		font-size: 0.28rem;
		color: #fff;
		line-height:1.2rem;
		padding: 0 .2rem;
		cursor: pointer;
	}

	nav ul li:hover{
		background-color: #000;
	}

	#banner{
		position: relative;
		display: flex;
		overflow: hidden;
		height:12rem;
		background-image: url(images/banner3.jpg) ;
		background-repeat: no-repeat ;
		background-position: 50%,50%;
	}

	#mask{
		width: 100%;
		height:100%;
		opacity: .5;
		background-color: #000;
		position: absolute;
		left:0;
		top:0;
	}

	#banner #input{
		align-self: center;
		height:6rem;
		margin: 0 auto;
		width:8rem;	
		font-size: 0;
		z-index: 999;
	}

	#input .inputElement{

		width:8rem;
		height:.6rem;
		margin-bottom: 0.4rem;
		border:0.04rem solid #808080;
		padding-left:.2rem;
		background: transparent;
		color: #808080;
	}

	#input .inputTextarea{
		height:1.4rem;
	}
	#input .inputElement.button{
		display: block;
		width:3rem;
		margin:0 auto;
	}
	#input .inputElement:hover{
		border-color: cyan;
	}

	#input .inputElement.button:hover{
		background: cyan;
	}
	
	/*主体部分*/

	.sectionOne-head{
		width:20rem;
		margin: 1rem auto;
	}

	.sectionOne-title{
		font-size: 0.8rem;
		text-align: center;
	} 

	.sectionOne-head hr{
		width:.4rem;
		border:.02rem solid cyan;
		margin:.2rem auto 0;
	}

	.sectionOne-text{
		font-size: .3rem;
		text-align: center;
		margin:0.2rem;
	}

	.sectionOne main{
		display: flex;
		width:20rem;
		margin:0 auto;
	}

	.sectionOne-left{
		position: relative;
		width:4.4rem;
	}
	
	.sectionOne-left h2{
		width:3.8rem;
		margin:0 auto;
		font-size: .6rem;
		text-align: center;
	}

	.sectionOne-left article{
		position: absolute;
		left:0;
		top:1.6rem;
		width:7.2rem;
		height:5rem;
		border:.02rem solid #808080;
		font-size: .32rem;
		background-color: rgba(255,255,255,.5);
	}


	.sectionOne-left article p{
		width:6.4rem;
		height:2.4rem;
		margin:0.6rem auto;
		
	}

	.sectionOne-left article .button{
		display: block;
		width:2rem;
		height:.8rem;
		line-height: .8rem;
		text-align: center;
		margin-left: .4rem;
		border:1px solid #000;
		background-color: #000;
		
	}

	.sectionOne-left article .button:hover{
		background-color: #fff;
		color: #000;
	}

	.sectionOne-middle{
		width:11.3rem;
		overflow: hidden;
		margin:0 .4rem;

	}

	.sectionOne-middle img{
		width:100%;
	}

	.sectionOne-right{
		width:3.6rem;
		margin:0 auto;
	}

	.sectionOne-right .right-dev{
		width:3.6rem;
		margin-bottom: 0.4rem;
		border:0.02rem solid cyan;
	}

	.sectionOne-right .right-dev h4{
		font-size: 0.46rem;
		text-align: center;
		margin:.4rem auto;
	}

	.sectionOne-right .right-dev hr{
		width:.8rem;
		border:.02rem solid cyan;
		margin:.2rem auto 0;
	}

	.sectionOne-right .right-dev span{
		display: block;
		text-align: center;
		width:1.6rem;
		font-size: .4rem;
		font-weight: bold;
		margin:.4rem auto;
	}

	
	
	.sectionTwo{
		width:100%;
		display: flex;
		flex-wrap: wrap;
		padding-top:1.4rem;
		padding-bottom: 1.4rem;
		justify-content: center;
	}

	.sectionTwo div{
		width:6.74rem;
		height:6.6rem;
		
	}

	.sectionTwo div img{
		width:6.74rem;
		height:6.6rem;
	}

	.sectionTwo  .text{
		background-color: cyan;
		position: relative;
	}

	.sectionTwo  .text h4{
		font-size: 0.46rem;
		width:80%;
		margin:.4rem auto;
		color: #fff;
	}

	.sectionTwo  .text p{
		width:80%;
		margin:0 auto;
		font-size: .32rem;
		color: #fff;
	}

	.sectionTwo .text .button{
		display: block;
		width:2rem;
		height:.8rem;
		font-size: .32rem;
		line-height: .8rem;
		text-align: center;
		margin: .4rem auto;
		border:1px solid #000;
		background-color: #000;
	}

	.sectionTwo .text .button:hover{
		background: none;
		color: #000;
	}
	
	.sectionTwo  .left-triangle{
		position: absolute;
		top:50%;
		left:-26px;
		width: 0;
	    height: 0;
	    border-style: solid;
	    border-width:15px 26px 15px 0px;
	    border-color:transparent cyan transparent transparent;
		/*width: 0;
	    height: 0;
	    border: 50px solid transparent;
	    border-top: 50px solid blue;*/
	}

	.sectionTwo  .right-triangle{
		position: absolute;
		top:50%;
		right:-26px;
		width: 0;
	    height: 0;
	    border-style: solid;
	    border-width:15px 0 15px 26px;
	    border-color:transparent  transparent transparent cyan;
	}

	.sectionThree{
		width:20rem;
		margin:.6rem auto;
	}

	.sectionThree-title{
		font-size: 0.8rem;
		text-align: center;
	} 

	.sectionThreeHead hr{
		width:.8rem;
		border:.02rem solid cyan;
		margin:.2rem auto 0;
	}

	.sectionThree-text{
		font-size: .3rem;
		text-align: center;
		margin:0.2rem;
	}

	.sectionThree .picContainer{
		width:20rem;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around; 
		margin-top:1rem;
	}

	.sectionThree .picContainer li{
		width:6.2rem;
		height:5.2rem;
		margin-bottom:.4rem;
		font-size: 0;
	}
	
	.sectionThree .picContainer li img{
		width:100%;
	}

	.sectionThree .picContainer li span{
		width:100%;
		height:1rem;
		display: block;
		background-color: #000;
		color: #fff;
		font-size: .5rem;
		text-align: center;
		line-height: 1rem;
	}

	.footer{
		display: flex;
		height:1.6rem;
		background: cyan;
		justify-content: center;
		align-items: center;
	}

	.footer span{
		display: block;
		font-size: .32rem;
		color: #fff;
	}


</style>
<body>
	<header>
		<a href="#" class="logo">
			<img src="./images/logo.png" alt="logo">
		</a>

		<nav>
			<ul>
				<li><a href="#">HOME</a></li>
				<li><a href="#">ABOUT</a></li>
				<li><a href="#">GALLERY</a></li>
				<li><a href="#">FACULTY</a></li>
				<li><a href="#">EVENTS</a></li>
				<li><a href="#">CONTACT</a></li>
			</ul>
		</nav>
	</header>
	<div id="banner">
		<div id="mask"></div>
			<div id="input">
			<input class="inputElement" type="text" placeholder="your Name">
			<input class="inputElement" type="text" placeholder="your Phone">
			<input class="inputElement" type="email" placeholder="your Email">
			<textarea  class="inputElement inputTextarea" cols="40" rows="10" placeholder="Write Your Comment here"></textarea>
			<button class="inputElement button">SEND MESSAGE</button>
		</div>
	</div>
		
	<div id="body">
		<section class="sectionOne">
			<div class="sectionOne-head">
				<h1 class="sectionOne-title">ABOUT</h1>
				<hr>
					<p class="sectionOne-text">Lorem Ipsum is simply dummy text of the printing and typesetting 
					<br>industry. Lorem Ipsum has been the insustry's standard dummy 
					<br>text ever since the 1500s.
					</p>
			</div>
			
			<main>
				<div class="sectionOne-left">
					<h2>A WORD ABOUT US</h2>
					
					<article>		
							<p>Praesent dignissim viverra est, sed bibendum 
						ligula congue non. Sed ac nisl et felis 
						gravida commodo? Suspendisse eget ullamcorper ipsum. 
						Suspendisse diam amet.</p>
						<a class="button">EXPLORE</a>
					
					</article>	
					
				</div>
				<div class="sectionOne-middle">
					<img src="./images/bb3.jpg" alt="classroom">
				</div>
				<aside class="sectionOne-right">
					<div class="right-dev">
						<h4>70000</h4>
						<hr>
						<span>Students</span>
					</div>
					<div class="right-dev">
						<h4>600</h4>
						<hr>
						<span>Faculty</span>
					</div>
				</aside>
			</main>
		</section>


		<section class="sectionTwo">
			<div><img src="images/b1.jpg" alt="b1"></div>
			<div class="text">
				<h4>70000</h4>
				<p>Praesent dignissim viverra est, sed bibendum 
				ligula congue non. Sed ac nisl et felis 
				gravida commodo? Suspendisse eget ullamcorper ipsum. 
				Suspendisse diam amet.</p>
				<a class="button">EXPLORE</a>
				<div class="left-triangle"></div>	
			</div>
			<div><img src="images/b2.jpg" alt="b2"></div>
			<div class="text">
				<h4>70000</h4>
				<p>Praesent dignissim viverra est, sed bibendum 
				ligula congue non. Sed ac nisl et felis 
				gravida commodo? Suspendisse eget ullamcorper ipsum. 
				Suspendisse diam amet.</p>
				<a class="button">EXPLORE</a>	
				<div class="left-triangle"></div>	
			</div>
			
			<div class="text">
				<h4>70000</h4>
				<p>Praesent dignissim viverra est, sed bibendum 
				ligula congue non. Sed ac nisl et felis 
				gravida commodo? Suspendisse eget ullamcorper ipsum. 
				Suspendisse diam amet.</p>
				<a class="button">EXPLORE</a>
				<div class="right-triangle"></div>		
			</div>
			<div><img src="images/b3.jpg" alt="b3"></div>
			
			<div class="text">
				<h4>70000</h4>
				<p>Praesent dignissim viverra est, sed bibendum 
				ligula congue non. Sed ac nisl et felis 
				gravida commodo? Suspendisse eget ullamcorper ipsum. 
				Suspendisse diam amet.</p>
				<a class="button">EXPLORE</a>	
				<div class="right-triangle"></div>	
			</div>
			<div><img src="images/b4.jpg" alt="b4"></div>
		</section>
		<section class="sectionThree">
			<div class="sectionThreeHead">
				<h1 class="sectionThree-title">GALLERY</h1>
				<hr>
				<p class="sectionThree-text">Lorem Ipsum is simply dummy text of the printing and typesetting 
				<br>industry. Lorem Ipsum has been the insustry's standard dummy 
				<br>text ever since the 1500s.
				</p>
			</div>

			<ul class="picContainer">
				<li>
					<img src="images/03-01.jpg" alt="01">
					<span>SCIENCE LAB</span>
				</li>
				<li>
					<img src="images/03-02.jpg" alt="02">
					<span>SCIENCE LAB</span>
				</li>
				<li>
					<img src="images/03-03.jpg" alt="03">
					<span>SCIENCE LAB</span>
				</li>
				<li>
					<img src="images/03-04.jpg" alt="04">
					<span>SCIENCE LAB</span>
				</li>
				<li>
					<img src="images/03-05.jpg" alt="05">
					<span>SCIENCE LAB</span>
				</li>
				<li>
					<img src="images/03-06.jpg" alt="06">
					<span>SCIENCE LAB</span>
				</li>
			</ul>
		</section>
	</div>
	<footer class="footer">
		<span>© 2018 imooc.com 京ICP备13046642号</span>
	</footer>
</body>
</html>